<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页签</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bord{
            border: 1px dashed #ee2602;
            width: 90%;
            margin: 20px auto;
        }
        .title{
            font-size: 20px;
            font-weight: bold;
            margin: 20px;
        }
        .introduce{
            font-size: 16px;
            margin: 0 0 20px 50px;
        }
        .red{
            color: red;
        }
    </style>
    <script>
        //数据的类型 5种基本数据类型
        // boolean
        // string
        // number
        // undefined  (未定义)
        // null (空类型) object 类型

        //引用类型
        //object      (对象)
        //function

        //声明一个变量
        // var a ='abc';
        //alert(a);
        // a =123;
        //alert(a);

        //逻辑语法控制
        //if (...){..}
        //if (...)else{..}
        //if（...）else if{...}{...}

        //循环
        //for (声明部分；条件判断部分；自加或者自减部分)
        //for(var i = 1;i <= 10; i++){
        //    alert(i);
        // }
        //  for (var i = 1;i<10;i++){
        //   document.write('<div>i*'+i+'='+(1*i)+'</div>');
        //  }
        //while(布尔类型的条件)
        //while true）{

        // }
        //do whlie 先执行 后判断是否循环


        //switch 匹配控制
        //       var str = 5；
        //          switch (str){
        //              case 1:
        //           }

        //页面加载完成
        //  window.onload = function(){
        // }

        //js DOM 来做页面控制
        //  步骤:
        //     1.获取页面元素
        //         document.getElement.getEIementById('xxx')
        //     2.


        //定义方法：[函数]
        // 1.function get() {
        //     方法体[程序体]
        // }
        // 2.var get = function(){
        //    方法体[程序体‘]
        // }


        window.onload = function() {
            document.getElementById('a').onclick = function () {
                document.getElementById('A').style.display = 'block';
                document.getElementById('B').style.display = 'none';
                document.getElementById('C').style.display = 'none';
            };
            document.getElementById('b').onclick = function () {
                document.getElementById('A').style.display = 'none';
                document.getElementById('B').style.display = 'block';
                document.getElementById('C').style.display = 'none';
            };
            document.getElementById('c').onclick = function () {
                document.getElementById('A').style.display = 'none';
                document.getElementById('B').style.display = 'none';
                ocument.getElementById('C').style.display = 'block';
            }
        };

        //页面输出
        //document.write();
        //document.writeln();换行


        //获取页面元素
        //document.getElementsByClassName();      class
        //document.getElementsById();             id
        // document.getElementsByTagName();        标签

        //不用获取，直接用。
        //document.title
        // document.head
        //document.body


        //生成图片1
        //var img = new Image();
        //img.src = '指定图片的位置';

        //生成图片2  createElement 专门用户建立新元素（元素类型-标签名称）
        //var pic = document.createElement('img');
        // pic.src = '指定图片的位置'

        //添加节点
        //div.appendChild(pic);
        //删除节点
        //div.removeChild(pic);

        //填充内容
        //textContent [属性] 通过等号赋值
        //innerText [属性] 通过等号赋值
        //最简单办法
        //text(新的内容);都兼容！
        //createTextNode = 文本内容[对象];使用appendChild
        //innerHTML 将HTML代码填充 作为字符串形式“”

        //属性控制
        //原生属性
        //自定义属性 .getAttribute("属性名称");

        //样式控制
        //样式的访问 obj.style.具体的样式名
        //样式表样式 obj.currentStyle.xxx[IE支持]
        //getComputedStyle(obj.false)[xxx][谷歌支持]
        //设置    obj.style.xxx = "xxx" ;

        //window 对象     内置对象

        //窗口缩放事件
        //window.onresize = function () {

        //}
        //自定义属性：

    </script>
</head>
<body>
<div class="bord">
    <div class="title">页签</div>
    <div class="introduce">
        <div style="width: 480px;height: 380px;border: 1px solid gray">
            <div style="float: left;width: 160px;height: 30px;background-color: #3388ff;text-align: center;cursor: pointer" id="a"> a </div>
            <div style="float: left;width: 160px;height: 30px;background-color: #4aff56;text-align: center;cursor: pointer" id="b"> b </div>
            <div style="float: left;width: 160px;height: 30px;background-color: #dc2d45;text-align: center;cursor: pointer" id="c"> c </div>

            <div style="width: 480px;height: 350px;background-color: hotpink;clear: both;" id="A">zxcvbnm</div>
            <div style="width: 480px;height: 350px;background-color: #4aff56;clear: both;display: none"id="B">asdfgh</div>
            <div style="width: 480px;height: 350px;background-color: navajowhite;clear: both;display: none"id="C">qwerty</div>
        </div>
    </div>
</div>
</body>
</html>